<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>登录</title>
    <div th:replace="header :: html" ></div>
    <style>
        .main{width:100%;padding:0;margin:0;background: #888}
        .info{color:#fff;padding-top:70px;}
        #loginbox {overflow: hidden !important;z-index: 100; width:350px;height:350px;
            text-align: center; margin-top:50px; margin-bottom:50px;
            border-radius:10px;
            background-color: rgba(0, 0, 0, 0.5);
        }
        #loginbox form{ width:100%;   position:relative; top:0; left:0; }
        #loginbox form#loginform { z-index: 200; display:block;}
        #loginbox .main_input_box { margin:0 auto; text-align:center;display:flex;}
        #loginbox .main_input_box input{flex:1; height:40px; border:none;line-height:38px;padding:0 5px;color:#666;}
        #loginbox .controls{ padding:0 30px;}
        #loginbox .control-group{ padding:5px 0; margin-bottom:0px;}
        #loginbox .controls a{color:#fff;}
        #loginbox .form-actions { padding: 0 30px;margin-top:10px;}
        #loginbox .form-actions .yan{height:25px;display:flex;}
        #loginbox .form-actions .yan img{height:100%;}
        #loginbox .form-actions .yan input{width:50px;height:100%;border:none;font-size:12px;margin:0;padding:0 5px;color:#666;}
        #loginbox .login{width:100%;margin-top:10px;}
        #loginbox .normal_text{ padding:15px 10px; text-align:center; font-size:14px; line-height:20px;  color:#fff;}

    </style>

</head>
<body>
    <div th:replace="navbar :: html" ></div>
    <div class="main">
        <div class="container">
            <div class="info pull-left">
                <h1>首页</h1>
            </div>
            <div id="loginbox" class="loginbox pull-right">
                <form action="" method="post" name="loginForm"
                      id="loginForm">
                    <div class="control-group">
                        <div class="controls">
                            <div class="main_input_box">
                                <input type="text" name="username" id="username" value="" placeholder="请输入用户名" />
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <div class="main_input_box">
                                <input type="password" name="password" id="password" placeholder="请输入密码" value="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="pull-right">
                            <input name="form-field-checkbox" id="saveid" type="checkbox" onclick="savePaw();"/><font color="white">记住密码</font>
                        </div>
                    </div>

                    <div class="control-group">
                        <div class="controls">
                            <a onclick="severCheck();"	class="btn btn-info btn-lg login" id="to-recover">登录</a>
                        </div>
                    </div><!---->

                </form>
            </div><!-- end loginbox -->
        </div>
    </div>

    <div th:replace="footer :: html" ></div>
    <script th:inline="javascript">
        //服务器校验
        function severCheck(){
            if(check()){
                var username = $("#username").val();
                var password = $("#password").val();
                $.ajax({
                    type: "POST",
                    url: 'login',
                    data: {
                        username:username,
                        password:password
                    },
                    dataType:'json',
                    cache: false,
                    success: function(data){
                        if(0 == data.code){
                            window.location.href="index.html";
                        }else {
                            $("#username").tips({
                                side : 1,
                                msg : data.msg,
                                bg : '#FF5080',
                                time : 15
                            });
                            $("#username").focus();
                        }
                    }
                });
            }
        }


        //客户端校验
        function check() {

            if ($("#username").val() == "") {

                $("#username").tips({
                    side : 2,
                    msg : '用户名不得为空',
                    bg : '#AE81FF',
                    time : 3
                });

                $("#username").focus();
                return false;
            } else {
                $("#username").val(jQuery.trim($('#username').val()));
            }

            if ($("#password").val() == "") {

                $("#password").tips({
                    side : 2,
                    msg : '密码不得为空',
                    bg : '#AE81FF',
                    time : 3
                });

                $("#password").focus();
                return false;
            }
            return true;
        }
    </script>
</body>
</html>